<template>
   <div>
        <h2> 个人信息</h2>
        <div v-if="flag">
          <p> 姓名: {{info.username}}</p>
          <p> 密码: {{info.password}}</p>
          <p>  <button @click="edit">编辑信息</button></p>
        </div>

         <div v-if="!flag">
               <p> 姓名: <input type="text" v-model="m"></p>
               <p> 密码:  <input type="text" v-model="n"></p>
               <p>  <button @click="submit">保存</button>
                    <input type="reset" value="返回" @click="back">
               
               </p>
         </div>


   </div>
</template>

<script>
import {edituserApi} from "@/utils/https.js"
export default {
   data(){return {
      info:{
          username:JSON.parse(localStorage.getItem("user")).username,
          password:JSON.parse(localStorage.getItem("user")).password,
          id:JSON.parse(localStorage.getItem("user")).id,
      },
      m:"",//得到新的输入得内容
      n:"",//得到新的输入得内容

      flag:true
      }
         },
    methods:{
      //编辑事件
      edit(){
            this.flag=false
            this.m=this.info.username
            this.n=this.info.password
      },
      //保存事件
      submit(){
         edituserApi(this.info).then(res=>{
           if(res.code==0){
               this.flag=true;
               localStorage.setItem("user",JSON.stringify({
                                          username:this.m,
                                          password:this.n,
                                          id:this.info.id}))
               //强制组件刷新
               // this.$forceUpdate()

               //页面刷新
               // window.location.reload()
               this.$router.go(0)
           }
         })
      },
       //返回事件
      back(){
         this.flag=true
      }
    },
   

}
</script>

<style>

</style>